<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            width: 80px;
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid #000;
            margin: 2px;
            text-align: center;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #aaa;
        }
    </style>
</head>

<body>
    将重复的代码封装成函数，减少冗余代码，实现代码复用。
    函数命名规则和变量基本一致
    <!--     
    纯 JavaScript 无法只声明函数而不定义
    函数的声明（声明 + 定义）：
    function 函数名(参数列表) {
        函数体
    }
    函数体是包裹在 {} 中的代码块，直到函数调用时才会被执行。
    调用：
    函数名(传递的参数列表)
     -->
    <script>
        // 声明并定义函数
        function sheet99() {
            for (let i = 1; i <= 9; i++) {
                for (let j = 1; j <= i; j++) {
                    document.write(`<span>${j}*${i}=${j * i}</span>`)
                }
                document.write('<br>')
            }
        }
        // 调用
        sheet99()
        sheet99()
        // 定义求累加和函数
        // 函数声明时，函数名后面小括号里面的是形式参数 start, end （相当于变量名用来接收实际参数，js中形参默认值默认为undefined）
        // 可以为参数设置默认值，如果调用函数时没有传递对应的参数值，将使用默认值
        function getSum(start = 0, end = 0) {
            let sum = 0
            for (let i = start; i <= end; i++) {
                sum += i
            }
            console.log(sum)  // 控制台打印输出
            return sum // 函数的返回值，js中函数返回值默认为undefined。(js中多值返回可以使用数组或对象)
        }
        getSum(50, 100)  // 函数调用时，函数名后面小括号里面的是实际参数 50, 100
    </script>
</body>

</html>